<template>
  <Main>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="项目名称">
        <el-input v-model="formInline.project_name" placeholder="项目名称"></el-input>
      </el-form-item>
      <el-form-item label="公司名称">
        <el-input v-model="formInline.org_name" placeholder="公司名称"></el-input>
      </el-form-item>
       <el-form-item label="状态">
          <el-select v-model="formInline.statuz" style="width:100%" placeholder="状态">
          <el-option v-for="item in data" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="fetch()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="kid"
      default-expand-all
      @sort-change="sortChange"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column width="150px" fixed prop="project_name" label="项目名称" sortable="custom"></el-table-column>
      <el-table-column width="150px" prop="org_name" label="公司名称" sortable="custom"></el-table-column>
      <el-table-column width="100px" prop="link_man" label="联系人"></el-table-column>
      <el-table-column width="100px" prop="link_phone" label="联系电话"></el-table-column>
      <el-table-column width="100px" prop="type" label="保函类型" sortable="custom"></el-table-column>
      <el-table-column width="110px" prop="uname" label="办理人员"></el-table-column>
      <el-table-column width="130px" prop="created" label="申请时间" sortable="custom" :formatter="dateFormatter"></el-table-column>
      <el-table-column width="120px" prop="cp_money" label="代办费用（元）"></el-table-column>
      <el-table-column prop="info_upload" label="线下信息提交"></el-table-column>
      <el-table-column width="100px" prop="backletter_money" label="尾款（元）"></el-table-column>
      <el-table-column prop="statuz" label="状态" sortable="custom"></el-table-column>
      <el-table-column fixed="right" label="操作" width="330px">
        <template slot-scope="scope">
          <el-button type="primary" @click="detail(scope.row.kid)">
            <i class="el-icon-search"></i>查看
          </el-button>
          <el-button type="primary" @click="changeStatuz(scope.row.kid)">
            <i class="el-icon-edit-outline"></i>信息更新
          </el-button>
           <el-button type="primary" v-if="scope.row.statuz=='办理完成'" @click="upload(scope.row.kid)">
            <i class="el-icon-upload2"></i>上传
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page
      :page="formInline.page"
      :limit="formInline.limit"
      :total="formInline.total"
      @change="changePage"
    ></page>
    <!-- </div> -->
    <Detail ref="Detail" @refresh="fetch"></Detail>
    <InfoChange ref="InfoChange" @refresh="fetch"></InfoChange>
     <upload ref="upload" @refresh="fetch"></upload>
  </Main>
</template>

<script>
import Main from "@/components/basic-container/main";
import page from "@/components/basic-page/page";
import { baseUrl } from "@/config/env";
import { dateForm } from "@/util/date";
import Detail from "./detail";
import InfoChange from "./edit";
import upload from "./upload";
const urls = {
  delete: baseUrl + "/zweixin/fk/bl/delete",
  list: baseUrl + "/zweixin/fk/bl/list_data"
};
export default {
  methods: {
    dateFormatter(row, column) {
      return dateForm(row.created);
    },
    sortChange(column, prop, order) {
      this.formInline.sorter = {
        field: column.prop,
        order: column.order
      };
      this.fetch();
    },
    changePage(val) {
      this.formInline.page = val;
      this.fetch();
    },
    detail: function(kid) {
      this.$refs.Detail.show(kid);
    },
    changeStatuz: function(kid) {
      this.$refs.InfoChange.show(kid);
    },
    fetch() {
      axios.get(urls.list, { params: this.formInline }).then(res => {
        const data = res.data.result;
        this.tableData = data.list;
        this.formInline.page = data.pageNumber;
        this.formInline.limit = data.pageSize;
        this.formInline.total = data.totalRow;
      });
    },
    upload(kid){
      this.$refs.upload.show(kid);
    }
  },
  mounted() {
    this.fetch();
  },
  data() {
    return {
      data: ["申请中", "申请成功", "办理中", "办理完成", "已取消"],
      formInline: {
        project_name: null,
        org_name: null,
        statuz:null,
        limit: 10,
        page: 1,
        total: 0,
        sorter: {}
      },
      tableData: []
    };
  },
  components: {
    Detail,
    InfoChange,
    Main,
    page,
    upload
  }
};
</script>
